<script setup>
import TheWelcome from '../components/TheWelcome.vue'
import { RouterLink } from 'vue-router'


const buttons = [
  { type: '', text: 'ChatGlm', link:'/zhipu' },
  { type: '', text: 'ChatGpt' },
]
import { ref } from 'vue'

const show = ref(false)
</script>

<template>
  <main class="container">
    <div class="overlay">
      <h1 style="color: #f2f2f2">春雨AI</h1>
      <TheWelcome />
      <div class="button-container">


          <div>
    <el-button @click="show = !show" style="background-color: #00fff4; color: #550303; border: #4ca0fd">Go！Ai</el-button>

    <div style="display: flex; margin-top: 20px; height: 100px">
      <transition name="el-zoom-in-center">
        <div v-show="show" class="transition-box">
              <el-button text>
      <RouterLink to="/zhipu" style="text-decoration: none; color: #23d1f8">智普清言--glm-4v-plus</RouterLink>

    </el-button>
                        <el-button text>
      <RouterLink to="/zhiputext" style="text-decoration: none; color: #23d1f8">智普清言--ChatGLM4</RouterLink>

    </el-button>
        </div>
      </transition>

      <transition name="el-zoom-in-top">
        <div v-show="show" class="transition-box">
              <el-button text>
      <RouterLink to="/about" style="text-decoration: none; color: #f1d205">ChatGpt</RouterLink>
    </el-button>
        </div>
      </transition>

      <transition name="el-zoom-in-bottom">
        <div v-show="show" class="transition-box">
              <el-button text>
      <RouterLink to="/about" style="text-decoration: none; color: #0cff5b">同义千问</RouterLink>
    </el-button>
        </div>
      </transition>
    </div>
  </div>


      </div>
    </div>
  </main>

</template>

<style scoped>
body,
html {
  margin: 0; /* 移除默认边距 */
  padding: 0; /* 移除默认填充 */
  height: 100%; /* 高度为 100% */
  width: 100%; /* 宽度为 100% */
  overflow: hidden; /* 隐藏滚动条 */
}

.container {
  position: relative; /* 设置相对定位 */
  height: 100vh; /* 高度为视口高度 */
  width: 100vw; /* 宽度为视口宽度 */
  overflow: hidden; /* 隐藏超出部分 */
  background-image: url('@/assets/beij.jpg'); /* 背景图片 */
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  background-attachment: fixed; /* 背景图片固定 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.overlay {
  position: relative; /* 设置相对定位 */
  z-index: 1; /* 提升层级 */
  text-align: center; /* 文字居中 */
}

.button-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  gap: 0.5rem; /* 按钮之间的间距 */
}

.el-button {
  margin-top: 1rem; /* 按钮与顶部的距离 */
}
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: rgba(30, 70, 195, 0.63);
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>